<script>
export default {
  name: "KnowledgeCard",
  props: ['cardData'],
  data: () => ({
    showComments: false,
    showActions: false
  }),
  methods: {
    toggleComment() {
      this.showComments = !this.showComments
    },
    handleCommentSubmit(content) {
      this.$emit('comment', {
        cardId: this.cardData.id,
        content
      })
    },
    formatTime(timestamp) {
    }
  }
}
</script>

<template>
  <div class="knowledge-card" @mouseenter="showActions = true" @mouseleave="showActions = false">
    <!-- 头部 -->
    <div class="card-header">
      <img :src="cardData.authorAvatar" class="avatar">
      <div>
        <h3 class="title">{{ cardData.title }}</h3>
        <p class="meta">{{ cardData.author }} · {{ formatTime(cardData.timestamp) }}</p>
      </div>
    </div>

    <!-- 内容 -->
    <div class="card-content">
      <p class="summary">{{ cardData.summary }}</p>
      <div class="tags">
        <span v-for="tag in cardData.tags" :key="tag" class="tag">{{ tag }}</span>
      </div>
    </div>

    <!-- 互动区 -->
    <div class="card-actions">
      <button
          class="like-btn"
          :class="{ 'liked': cardData.isLiked }"
          @click="$emit('like', cardData.id)"
      >
        ♥ {{ cardData.likes }}
      </button>
      <button class="comment-btn" @click="toggleComment">
        💬 {{ cardData.comments.length }}
      </button>
    </div>

    <!-- 评论区域 -->
    <transition name="slide">
      <comment-section
          v-if="showComments"
          :comments="cardData.comments"
          @submit="handleCommentSubmit"
      />
    </transition>
  </div>
</template>

<style scoped>

</style>